<template>
	<view class="contentCard" >
		<uni-popup ref="popup" type="dialog">
			<detail :id="id"></detail>
		</uni-popup>
		<view class="journalCard" @click="toDetail(item.id)">
				<view class="card">
					<view class="leftCard">
						<text class="day">{{item.day}}</text>
						<text class="week">{{item.week}}</text>
					</view>
					<view class="rightCard">
						<text class="time">{{item.time}}</text>
						<text class="date">{{item.date}}</text>
						<text class="content">{{item.content}}</text>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"journalCard",
		props:{
			item:{
				type:Object,
				default(){
					return{
						id:"1",
						day:"14",
						week:"星期二",
						time:"17:27",
						date:"2023-12-14",
						content:"今天在湿地公园....."
					}
				}
			}
		},
		
		data() {
			return {
				id:""
			};
		},
		methods:{
			toDetail(id){
				console.log(id)
				if(id==null){
					return
				}else{
					this.id = id
					this.$refs.popup.open()
				}
				
			}
		}
	}
</script>

<style lang="scss">
.contentCard{
		
		.journalCard {
			display: flex;
			justify-content: center;
			
			.card:active {
			  opacity: 0.8;
			}
			
		
			.card {
				margin-top: 20rpx;
				width: 90%;
				height: 175rpx;
				background: white;
				border-radius: 28rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 14rpx;
				
				text{
					color: $font-blue;
				}
				
				.leftCard{
					text-align: center;
					
					.day,
					.week{
						display: flex;
						flex-direction: row;
					}
					
					.day {
						font-size: 95rpx;
						font-weight: bold;
						margin-right: 50rpx;
					}
					
					.week {
						font-size: 30rpx;
						margin-bottom: 30rpx;
						margin-left: 28rpx;
					}
					
				}
				.rightCard{
					.time,
					.and,
					.date {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						margin-right: 10rpx;
					}
					
					.time {
						font-size: 30rpx;
						margin-bottom: 4rpx;
					}
					
					.date {
						font-size: 30rpx;
						margin-bottom: 4rpx;
					}
					
					.content {
						font-size: 25rpx;
					}
					
				}
				
				
			
				
				
			}
	}
}
</style>